<!--
 * @author: sanbao
 * @Date: 2022-08-04 21:58:43
-->
<style lang='scss' scoped>
.shoppingCart {
  .top {
    background-color: rgb(237, 219, 219);
    border-bottom: 4px solid #ed712e;
    height: 44px;
    line-height: 44px;
  }
  .tableimg {
    width: 100px;
  }
  .tablefooter {
    display: flex;
    span {
      flex: 1;
      text-align: center;
      padding: 10px 0;
    }
    button {
      padding: 10px;
    }
    .active {
      background-color: red;
    }
  }
}
</style>

<template>
  <div class="shoppingCart">
    <div class="top">
      <div class="banxin_center">购物车</div>
    </div>

    <div class="banxin_center">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="全选">
          <template #default="scope">
            <input type="checkbox" v-model="scope.row.check" />
          </template>
        </el-table-column>
        <el-table-column label="商品照片">
          <template #default="scope">
            <img
              class="tableimg"
              :src="'http://101.132.181.9:3000/' + `${scope.row.productImg}`"
            />
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="num" label="数量">
          <template #default="scope">
            <el-input-number v-model="scope.row.num" :min="1" :max="10" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="小记">
          <template #default="scope">
            {{ scope.row.num * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="danger"
              round
              @click="deleteShoppingCart(scope.row.productID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tablefooter">
        <span @click="allchecked">
          <input type="checkbox" v-model="checkedAll" disabled />
          全部选中
        </span>
        <span>
          共已选择
          <i>{{ numAll }}</i> 件
        </span>
        <span>
          合计
          <i>{{ priceAll }}</i>
          元
        </span>
        <span>
          <button
            :class="{ active: flag == false }"
            :disabled="flag"
            @click="goconfirmOrder"
          >
            去结算
          </button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted, watch } from "vue";
import ShopModel from "@/api/shop";
import { ElNotification, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getshoplist();
    });
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      user: JSON.parse(localStorage.getItem("userlist")),
      tableData: [],
      flag: true,
      // 总数量
      numAll: computed(() => {
        let num = 0;
        data.tableData.forEach((v) => {
          if (v.check) {
            num += v.num;
            data.flag = false;
          } else {
            data.flag = true;
          }
        });
        return num;
      }),
      // 总价格
      priceAll: computed(() => {
        let num = 0;
        data.tableData.forEach((v) => {
          if (v.check) {
            num += v.num * v.price;
          }
        });
        return num;
      }),
      checkedAll: computed(() => {
        if (data.tableData.length > 0) {
          return data.tableData.every((v) => v.check);
        } else {
          return false;
        }
      }),
    });
    const getshoplist = async () => {
      const respnse = await ShopModel.getshoplist({
        user_id: data.user.user_id,
      });
      if (respnse.data.code == "001") {
        data.tableData = respnse.data.shoppingCartData;
      }
    };
    const allchecked = () => {
      data.tableData.forEach((v) => {
        if (data.checkedAll == false) {
          v.check = true;
        } else if (data.checkedAll == true) {
          v.check = false;
        }
      });
    };
    const deleteShoppingCart = (id) => {
      ElMessageBox.confirm("你确定要删除这条数据吗？？", "警告！！！！", {
        confirmButtonText: "是的",
        cancelButtonText: "不了",
        type: "warning",
      })
        .then(async () => {
          const respnse = await ShopModel.deleteShoppingCart({
            user_id: data.user.user_id,
            product_id: id,
          });
          if (respnse.data.code == "001") {
            ElNotification.success(respnse.data.msg);
            getshoplist();
          }
        })
        .catch(() => {
          ElNotification.success("取消删除");
        });
    };
    const goconfirmOrder = () => {
      let okshoplist = [];
      data.tableData.forEach((v) => {
        if (v.check) {
          okshoplist.push(v);
        }
      });
      store.commit("addshoplist", okshoplist);
      router.push("/confirmOrder");
    };
    return {
      ...toRefs(data),
      allchecked,
      deleteShoppingCart,
      goconfirmOrder,
    };
  },
};
</script>
